<script>
import LineChart from '@/views/dashboard/admin/components/LineChart'
import LineChartNet from '@/views/dashboard/admin/components/CompsExtension/LineChartNet'
export default {
  components: { LineChartNet, LineChart }
}
</script>
<template>
  <div class="monitorpanel-container">
    <span>介是一个监视器页面</span>
    <el-divider></el-divider>
    <el-select v-model="value" placeholder="请选择" filterable @change="selectItem">
      <el-option
        v-for="item in options"
        :key="item.label"
        :label="item.label"
        :value="item.value"
      >
        <span style="float: left">{{ item.value }}</span>
        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.describe }}</span>
      </el-option>
    </el-select>
    <el-divider></el-divider>
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <el-button @click="clickdebug">测试</el-button>
      <!--<line-chart ref="t1" :chart-data="lineChartData.newVisitis"></line-chart>-->
      <line-chart-net ref="water" :chart-data="chartDataWater"></line-chart-net>
      <line-chart-net ref="temperature" :chart-data="chartDataTemperature"></line-chart-net>
      <line-chart-net ref="totalflow" :chart-data="chartDataTotalflow"></line-chart-net>
      <line-chart-net ref="flowrate" :chart-data="chartDataFlowrate"></line-chart-net>
      <line-chart-net ref="power" :chart-data="chartDataPower"></line-chart-net>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { initDevices, unserializer } from '@/views/devicemgrpanel/devicemgrpanel'
import { initOptions, initDataWall } from '@/views/monitorpanel/monitorpanel'
import { requestData, getChartDatas } from "@/views/monitorpanel/monitorpanel";

// vue-admin-template 封装的echarts
import LineChart from '@/views/dashboard/admin/components/LineChart'
import LineChartNet from "@/views/dashboard/admin/components/CompsExtension/LineChartNet";
// 加载自定义的echarts

export default {
  name: 'MonitorPanel',
  components: {
    LineChart,
    LineChartNet
  },
  props: {},
  data() {
    return {
      // 下拉框数据
      options: [
        // {
        //   value: '选项1',
        //   label: '奶妈1'
        // }
      ],
      value: '',
      selectedDevice: null,

      // lineChartData
      lineChartData: {
        newVisitis: {
          expectedData: [100, 120, 161, 134, 105, 160, 165],
          actualData: [120, 82, 91, 154, 162, 140, 145]
        }
      },
      // debug count
      ct: 0,
      // 水位表
      chartDataWater: {
        xAxis: {
          data: [],
          boundaryGap: false,
          axisTick: {
            show: false
          }
        },
        legend: {
          data: []
        },
        series_data: []
      },
      // 水温表
      chartDataTemperature: {
        xAxis: {
          data: [],
          boundaryGap: false,
          axisTick: {
            show: false
          }
        },
        legend: {
          data: []
        },
        series_data: []
      },
      // 总流量表
      chartDataTotalflow: {
        xAxis: {
          data: [],
          boundaryGap: false,
          axisTick: {
            show: false
          }
        },
        legend: {
          data: []
        },
        series_data: []
      },
      // 瞬时流量表
      chartDataFlowrate: {
        xAxis: {
          data: [],
          boundaryGap: false,
          axisTick: {
            show: false
          }
        },
        legend: {
          data: []
        },
        series_data: []
      },
      // 电压表
      chartDataPower: {
        xAxis: {
          data: [],
          boundaryGap: false,
          axisTick: {
            show: false
          }
        },
        legend: {
          data: []
        },
        series_data: []
      },
      // 定时器
      timer0: null
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
    this.initSelector()
    /* 初始化定时器 */
    // this.timer0 = setInterval(this.updateChartsByTimer, 2000)
  },
  beforeDestroy() {
    if (this.timer0) {
      clearInterval(this.timer0)
    }
    this.timer0 = null
  },
  methods: {
    /* 初始化设备，填充下拉框列表 */
    initSelector() {
      return new Promise((resolve, reject) => {
        initDevices().then(response => {
          const tableData = unserializer(response.devices)
          this.options = initOptions(tableData)
          resolve()
        }).catch(error => {
          this.$notify({ title: '提示', message: '服务器无响应，稍后重试', duration: 1500 })
          reject(error)
        })
      })
    },

    /* 选择设备 */
    selectItem(value) {
      var tmpSelected = {}
      this.options.forEach((val) => {
        if (val.value === value) {
          tmpSelected = val
          return true
        }
      })

      // todo: 接服务器响应
      return new Promise((resolve, reject) => {
        initDataWall({ deviceID: tmpSelected.value }).then(response => {
          console.log(response)
          // console.log(response.device_id)
          this.selectedDevice = tmpSelected
          resolve()
        }).catch(error => {
          this.$notify({ title: '提示', message: '选择设备失败，请重试', duration: 1500 })
          reject(error)
        })
      })
    },

    /* clickdebug */
    clickdebug() {
      console.log('点击我！')
      // this.ct = this.ct + 1
      // 已经在子控件中设置了watch，所以直接修改绑定数据即可刷新控件
      // this.chartData.series_data = [this.ct, this.ct, this.ct, this.ct, this.ct, this.ct, this.ct]

      // 对接服务器
      return new Promise((resolve, reject) => {
        console.log(this.selectedDevice.value)
        requestData(this.selectedDevice.value).then(response => {
          const data = response
          const chartDataWater = getChartDatas(data.device_datas, 'water')
          this.chartDataWater.legend.data = ['水位计']
          this.chartDataWater.xAxis.data = chartDataWater.xAxisLabel
          this.chartDataWater.series_data = chartDataWater.seriesData
          const chartDataTemperature = getChartDatas(data.device_datas, 'temperature')
          this.chartDataTemperature.legend.data = ['水温计']
          this.chartDataTemperature.xAxis.data = chartDataTemperature.xAxisLabel
          this.chartDataTemperature.series_data = chartDataTemperature.seriesData
          const chartDataTotalflow = getChartDatas(data.device_datas, 'totalflow')
          this.chartDataTotalflow.legend.data = ['总流量']
          this.chartDataTotalflow.xAxis.data = chartDataTotalflow.xAxisLabel
          this.chartDataTotalflow.series_data = chartDataTotalflow.seriesData
          const chartDataFlowrate = getChartDatas(data.device_datas, 'flowrate')
          this.chartDataFlowrate.legend.data = ['流量表']
          this.chartDataFlowrate.xAxis.data = chartDataFlowrate.xAxisLabel
          this.chartDataFlowrate.series_data = chartDataFlowrate.seriesData
          const chartDataPower = getChartDatas(data.device_datas, 'power')
          this.chartDataPower.legend.data = ['电压计']
          this.chartDataPower.xAxis.data = chartDataPower.xAxisLabel
          this.chartDataPower.series_data = chartDataPower.seriesData
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },

    /* 定时器0执行函数 */
    updateChartsByTimer() {
      return new Promise(((resolve, reject) => {
        console.log(this.selectedDevice)
        requestData(this.selectedDevice.value).then(response => {
          const data = response
          // 设置图标数据的代码块，未来可封装到一个函数处理
          const chartDataWater = getChartDatas(data.device_datas, 'water')
          this.chartDataWater.legend.data = ['water']
          this.chartDataWater.xAxis.data = chartDataWater.xAxisLabel
          this.chartDataWater.series_data = chartDataWater.seriesData
          const chartDataTemperature = getChartDatas(data.device_datas, 'temperature')
          this.chartDataTemperature.legend.data = ['water']
          this.chartDataTemperature.xAxis.data = chartDataTemperature.xAxisLabel
          this.chartDataTemperature.series_data = chartDataTemperature.seriesData
          const chartDataTotalflow = getChartDatas(data.device_datas, 'totalflow')
          this.chartDataTotalflow.legend.data = ['water']
          this.chartDataTotalflow.xAxis.data = chartDataTotalflow.xAxisLabel
          this.chartDataTotalflow.series_data = chartDataTotalflow.seriesData
          const chartDataFlowrate = getChartDatas(data.device_datas, 'flowrate')
          this.chartDataFlowrate.legend.data = ['water']
          this.chartDataFlowrate.xAxis.data = chartDataFlowrate.xAxisLabel
          this.chartDataFlowrate.series_data = chartDataFlowrate.seriesData
          const chartDataPower = getChartDatas(data.device_datas, 'power')
          this.chartDataPower.legend.data = ['power']
          this.chartDataPower.xAxis.data = chartDataPower.xAxisLabel
          this.chartDataPower.series_data = chartDataPower.seriesData
          /* end */
          resolve()
        }).catch(err => {
          reject(err)
        })
      }))
    }
  }
}
</script>

<style lang="scss" scoped>
.monitorpanel {
  &-container {
    margin: 30px;
  }
}

.echarts {
  width: 100%;
  height: 100%;
}
</style>
